<template>
  <div class="app">
    <header class="app-header">
      <h1 class="title">数据大屏实时展示</h1>
      <span class="time">当前时间: {{ time }}</span>
    </header>
    <main class="app-main">
      <div class="left">
        <Left />
      </div>
      <div class="center"><Center /></div>
      <div class="right"><Right /></div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import dayjs from "dayjs";  // pnpm add dayjs
import Left from "./views/left/index.vue";
import Center from "./views/center/index.vue";
import Right from "./views/right/index.vue";
const time = ref(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"));
let timeId: number;

onMounted(() => {
  setInterval(() => {
    time.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
  }, 1000);
});
onUnmounted(() => {
  clearInterval(timeId);
});
</script>

<style scoped lang="scss">
.app {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color); // 使用 css 变量
  overflow: hidden;
}

.app-header {
  height: 60px;
  background-image: url("./assets/images/head_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 110%;

  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;
}

.title {
  margin: 0;
  font-size: 22px;
  color: var(--color-white);
}

.time {
  position: absolute;
  right: 10px;
  top: 14px;
  font-size: 12px;
  color: var(--color-white-opacity-5);
}

.app-main {
  display: flex;
  height: calc(100% - 60px);
  padding: 0 10px;
}
.left,
.right {
  width: 451px;
  height: 100%;
}
.center {
  width: 751px;
  height: 100%;
}
</style>
